/* ==========================================================
   PLAKATE – KOMPLETTE CSS
   RG DIGITALDRUCKFORUM GÖHRINGER

   DIESE DATEI ERSETZT DIE ALTE
   "plakate style.css" KOMPLETT.
========================================================== */


/* ==========================================================
   01
   GRUNDLAGEN
========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body#plakate {
  --pl-red: #c5001a;
  --pl-red-light: #ff3046;

  --pl-bg: #101315;
  --pl-bg-dark: #090b0c;
  --pl-bg-soft: #171b1e;

  --pl-white: #ffffff;

  --pl-muted:
    rgba(255, 255, 255, 0.66);

  --pl-muted-soft:
    rgba(255, 255, 255, 0.42);

  --pl-line:
    rgba(255, 255, 255, 0.10);

  --pl-line-strong:
    rgba(255, 255, 255, 0.20);

  min-width: 320px;

  margin: 0;

  overflow-x: hidden;

  color: #ffffff;

  background:
    var(--pl-bg);

  font-family:
    "Avenir Next",
    Avenir,
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


body#plakate img {
  display: block;

  max-width: 100%;
}


body#plakate button,
body#plakate input,
body#plakate textarea,
body#plakate select {
  font: inherit;
}


body#plakate a {
  color: inherit;
}


/* ==========================================================
   WICHTIG
   INHALTE NIEMALS DURCH REVEAL VERSTECKEN
========================================================== */

body#plakate .reveal,
body#plakate .reveal.is-visible {
  opacity: 1 !important;

  visibility: visible !important;

  transform: none !important;
}



/* ==========================================================
   02
   SEITENGRUNDGERÜST
========================================================== */

.pl-page {
  position: relative;

  width: 100%;

  padding-top: 92px;

  overflow: hidden;

  background:
    var(--pl-bg);
}


.pl-shell {
  width: 100%;

  margin: 0;

  padding-right:
    var(
      --site-gutter,
      clamp(28px, 5vw, 92px)
    );

  padding-left:
    var(
      --site-gutter,
      clamp(28px, 5vw, 92px)
    );
}


.pl-section {
  position: relative;

  width: 100%;

  padding:
    96px 0;
}


.pl-section + .pl-section {
  border-top:
    1px solid
    rgba(255, 255, 255, 0.045);
}



/* ==========================================================
   03
   TYPOGRAFIE
========================================================== */

.pl-kicker,
.pl-eyebrow {
  margin:
    0 0 14px;

  color:
    var(--pl-red-light);

  font-size:
    0.72rem;

  font-weight:
    900;

  line-height:
    1.2;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.pl-section-heading {
  width:
    min(
      100%,
      800px
    );

  margin-bottom:
    46px;
}


.pl-section-heading h2,
.pl-printdata-heading h2,
.pl-faq-heading h2,
.pl-final-copy h2,
.pl-production-copy h2 {
  margin: 0;

  color:
    #ffffff;

  font-size:
    clamp(
      2.4rem,
      4.5vw,
      4.7rem
    );

  font-weight:
    700;

  line-height:
    0.99;

  letter-spacing:
    -0.052em;
}


.pl-section-heading > p:last-child,
.pl-faq-heading > p:last-child {
  max-width:
    680px;

  margin:
    20px 0 0;

  color:
    var(--pl-muted);

  font-size:
    1rem;

  line-height:
    1.72;
}



/* ==========================================================
   04
   BREADCRUMB
========================================================== */

.pl-breadcrumb {
  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    rgba(255, 255, 255, 0.46);

  background:
    var(--pl-bg);

  font-size:
    0.76rem;

  font-weight:
    650;
}


.pl-breadcrumb a {
  color:
    inherit;

  text-decoration:
    none;

  transition:
    color 0.25s ease;
}


.pl-breadcrumb a:hover,
.pl-breadcrumb a:focus-visible {
  color:
    var(--pl-red-light);
}


.pl-breadcrumb span {
  color:
    rgba(255, 255, 255, 0.22);
}


.pl-breadcrumb strong {
  color:
    #ffffff;
}



/* ==========================================================
   05
   HERO
========================================================== */

.pl-hero {
  position:
    relative;

  width:
    100%;

  min-height:
    625px;

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    #080909;
}



/* ==========================================================
   HERO BILD
========================================================== */

.pl-hero-bg {
  position:
    absolute;

  top:
    0;

  right:
    0;

  z-index:
    0;

  width:
    68%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center right;

  opacity:
    0.92;

  transition:
    transform 5s ease;
}


.pl-hero:hover
.pl-hero-bg {
  transform:
    scale(1.012);
}



/* ==========================================================
   HERO OVERLAY
========================================================== */

.pl-hero-overlay {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      #080909 0%,
      rgba(8, 9, 9, 0.99) 29%,
      rgba(8, 9, 9, 0.88) 46%,
      rgba(8, 9, 9, 0.46) 64%,
      rgba(8, 9, 9, 0.08) 89%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(8, 9, 9, 0.80) 100%
    );
}



/* ==========================================================
   HERO INNER
========================================================== */

.pl-hero-inner {
  position:
    relative;

  z-index:
    2;

  min-height:
    625px;

  padding-top:
    48px;

  padding-bottom:
    28px;

  display:
    flex;

  flex-direction:
    column;
}



/* ==========================================================
   HERO LEISTUNGEN
========================================================== */

.pl-hero-services {
  width:
    fit-content;

  margin:
    0 0 38px;

  padding:
    0;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    28px;

  list-style:
    none;
}


.pl-hero-service {
  position:
    relative;

  padding-bottom:
    8px;

  color:
    rgba(255, 255, 255, 0.40);

  font-size:
    0.70rem;

  font-weight:
    900;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


.pl-hero-service::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    0;

  width:
    0;

  height:
    2px;

  background:
    var(--pl-red-light);

  transition:
    width 0.35s ease;
}


.pl-hero-service.active,
.pl-hero-service.is-active {
  color:
    var(--pl-red-light);

  transform:
    translateY(-2px);
}


.pl-hero-service.active::after,
.pl-hero-service.is-active::after {
  width:
    100%;
}



/* ==========================================================
   HERO TEXT
========================================================== */

.pl-hero-content {
  width:
    min(
      650px,
      56%
    );

  max-width:
    650px;
}


.pl-hero h1 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      3.4rem,
      5.4vw,
      5.8rem
    );

  font-weight:
    700;

  line-height:
    0.92;

  letter-spacing:
    -0.058em;
}


.pl-changing-word {
  display:
    inline-block;

  min-height:
    1em;

  color:
    var(--pl-red-light);

  transition:
    opacity 0.26s ease,
    transform 0.26s ease;
}


.pl-changing-word.is-changing {
  opacity:
    0;

  transform:
    translateY(10px);
}


.pl-hero-text {
  max-width:
    570px;

  margin:
    24px 0 0;

  color:
    rgba(255, 255, 255, 0.72);

  font-size:
    0.98rem;

  line-height:
    1.7;
}



/* ==========================================================
   HERO FAKTEN

   EXAKT WIE DRUCKEREI-SEITE:
   - KEIN ICON KÄSTCHEN
   - ROTER OUTLINE ICON
   - TRENNLINIEN
   - DEZENTER HOVER
========================================================== */

.pl-hero-facts {
  width:
    min(
      920px,
      100%
    );

  margin-top:
    auto;

  padding-top:
    28px;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  border-top:
    1px solid
    rgba(255, 255, 255, 0.16);
}


.pl-hero-fact {
  position:
    relative;

  min-height:
    94px;

  padding:
    15px 25px;

  display:
    grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  align-items:
    start;

  gap:
    14px;

  transition:
    transform 0.35s ease,
    background 0.35s ease;
}


.pl-hero-fact:first-child {
  padding-left:
    0;
}


.pl-hero-fact:not(:last-child)::after {
  content:
    "";

  position:
    absolute;

  top:
    15px;

  right:
    0;

  bottom:
    15px;

  width:
    1px;

  background:
    rgba(255, 255, 255, 0.14);
}


.pl-hero-fact-icon {
  min-width:
    34px;

  color:
    var(--pl-red-light);
}


.pl-hero-fact-icon svg {
  width:
    28px;

  height:
    28px;

  display:
    block;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.pl-hero-fact-copy strong {
  display:
    block;

  margin-bottom:
    5px;

  color:
    #ffffff;

  font-size:
    0.90rem;
}


.pl-hero-fact-copy p {
  margin:
    0;

  color:
    rgba(255, 255, 255, 0.63);

  font-size:
    0.73rem;

  line-height:
    1.45;
}


.pl-hero-fact:hover {
  transform:
    translateY(-3px);

  background:
    linear-gradient(
      180deg,
      rgba(197, 0, 26, 0.08),
      transparent
    );
}



/* ==========================================================
   06
   PLAKATE IM EINSATZ
========================================================== */

.pl-usage-section {
  padding-top:
    76px;

  padding-bottom:
    80px;

  background:
    var(--pl-bg);
}


.pl-usage-grid {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    clamp(
      17px,
      2vw,
      27px
    );

  align-items:
    stretch;
}


.pl-usage-card {
  min-width:
    0;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid
    var(--pl-line);

  border-radius:
    20px;

  background:
    rgba(255, 255, 255, 0.018);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}


.pl-usage-card:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(255, 48, 70, 0.34);

  box-shadow:
    0 22px 48px
    rgba(0, 0, 0, 0.26);
}



/* ==========================================================
   PLAKAT BILD
========================================================== */

.pl-usage-image {
  position:
    relative;

  height:
    clamp(
      235px,
      25vw,
      340px
    );

  margin:
    0;

  overflow:
    hidden;

  background:
    #090b0c;
}


.pl-usage-image::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0, 0, 0, 0.40)
    );
}


.pl-usage-image img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform 0.65s
    cubic-bezier(
      0.2,
      0.72,
      0.2,
      1
    );
}


.pl-usage-card:hover
.pl-usage-image img {
  transform:
    scale(1.035);
}



/* ==========================================================
   PLAKAT NUMMER
========================================================== */

.pl-usage-index {
  position:
    absolute;

  right:
    13px;

  bottom:
    12px;

  z-index:
    2;

  padding:
    6px 9px;

  color:
    #ffffff;

  background:
    rgba(7, 8, 9, 0.84);

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius:
    999px;

  font-size:
    0.61rem;

  font-weight:
    900;
}



/* ==========================================================
   PLAKAT TEXT
========================================================== */

.pl-usage-copy {
  flex:
    1;

  padding:
    20px 20px 23px;
}


.pl-usage-label {
  margin:
    0 0 9px;

  color:
    var(--pl-red-light);

  font-size:
    0.62rem;

  font-weight:
    900;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.pl-usage-copy h3 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      1.15rem,
      1.55vw,
      1.5rem
    );

  line-height:
    1.12;

  letter-spacing:
    -0.025em;
}


.pl-usage-copy > p:last-child {
  margin:
    13px 0 0;

  color:
    var(--pl-muted);

  font-size:
    0.82rem;

  line-height:
    1.55;
}



/* ==========================================================
   07
   FORMATE
========================================================== */

.pl-format-section {
  background:
    var(--pl-bg-dark);
}


.pl-format-layout {
  display:
    grid;

  grid-template-columns:
    minmax(340px, 0.87fr)
    minmax(460px, 1.13fr);

  gap:
    clamp(
      50px,
      7vw,
      105px
    );

  align-items:
    center;
}


.pl-format-copy h2 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      2.6rem,
      4.5vw,
      4.8rem
    );

  line-height:
    0.96;

  letter-spacing:
    -0.052em;
}


.pl-format-copy > p:not(.pl-kicker) {
  max-width:
    550px;

  margin:
    22px 0 0;

  color:
    var(--pl-muted);

  line-height:
    1.7;
}



/* ==========================================================
   FORMAT BUTTONS
========================================================== */

.pl-format-buttons {
  margin-top:
    32px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;
}


.pl-format-buttons button {
  min-width:
    61px;

  padding:
    11px 15px;

  color:
    rgba(255, 255, 255, 0.59);

  background:
    transparent;

  border:
    1px solid
    var(--pl-line);

  border-radius:
    999px;

  cursor:
    pointer;

  font-size:
    0.77rem;

  font-weight:
    850;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.pl-format-buttons button:hover,
.pl-format-buttons button:focus-visible,
.pl-format-buttons button.is-active {
  color:
    #ffffff;

  background:
    rgba(197, 0, 26, 0.14);

  border-color:
    var(--pl-red-light);

  transform:
    translateY(-2px);

  outline:
    0;
}



/* ==========================================================
   FORMAT META
========================================================== */

.pl-format-meta {
  margin-top:
    25px;

  padding-top:
    19px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    24px 46px;

  border-top:
    1px solid
    var(--pl-line);
}


.pl-format-meta > div {
  display:
    grid;

  gap:
    4px;
}


.pl-format-meta span {
  color:
    var(--pl-muted-soft);

  font-size:
    0.65rem;

  font-weight:
    850;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


.pl-format-meta strong {
  color:
    #ffffff;

  font-size:
    0.96rem;
}



/* ==========================================================
   FORMAT STAGE
========================================================== */

.pl-format-stage {
  position:
    relative;

  min-height:
    500px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border:
    1px solid
    var(--pl-line);

  border-radius:
    26px;

  background:
    #0d1012;
}


.pl-format-grid {
  position:
    absolute;

  inset:
    0;

  opacity:
    0.65;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.024) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.024) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;
}


.pl-format-stage::before {
  content:
    "";

  position:
    absolute;

  width:
    310px;

  height:
    310px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(197, 0, 26, 0.13),
      transparent 68%
    );
}



/* ==========================================================
   FORMAT PLAKAT
========================================================== */

.pl-poster-preview {
  position:
    relative;

  z-index:
    2;

  width:
    255px;

  max-width:
    calc(100% - 70px);

  aspect-ratio:
    594 / 841;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  box-shadow:
    0 32px 70px
    rgba(0, 0, 0, 0.52);

  transition:
    width 0.5s
    cubic-bezier(
      0.2,
      0.72,
      0.2,
      1
    ),
    transform 0.4s ease;
}


.pl-poster-preview:hover {
  transform:
    translateY(-6px)
    rotate(-0.5deg);
}


.pl-poster-art {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.pl-poster-format {
  position:
    absolute;

  right:
    11px;

  bottom:
    11px;

  padding:
    7px 9px;

  color:
    #ffffff;

  background:
    rgba(8, 8, 8, 0.84);

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius:
    999px;

  font-size:
    0.64rem;

  font-weight:
    850;

  letter-spacing:
    0.12em;
}


.pl-format-note {
  position:
    absolute;

  right:
    19px;

  bottom:
    17px;

  color:
    rgba(255, 255, 255, 0.34);

  font-size:
    0.62rem;

  font-weight:
    850;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}



/* ==========================================================
   08
   PAPIERAUSWAHL
========================================================== */

.pl-paper-section {
  background:
    var(--pl-bg);
}


/* ==========================================================
   GRID
========================================================== */

.pl-paper-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    18px;

  align-items:
    stretch;
}


/* ==========================================================
   PAPIER KARTE
========================================================== */

.pl-paper-card {
  position:
    relative;

  min-width:
    0;

  min-height:
    570px;

  overflow:
    hidden;

  border:
    1px solid
    var(--pl-line);

  border-radius:
    25px;

  background:
    linear-gradient(
      145deg,
      #171b1e,
      #0b0d0e
    );

  box-shadow:
    0 18px 46px
    rgba(0, 0, 0, 0.18);

  transition:
    transform 0.38s ease,
    border-color 0.38s ease,
    box-shadow 0.38s ease,
    background 0.38s ease;
}


.pl-paper-card:hover,
.pl-paper-card:focus-within,
.pl-paper-card.is-active {
  transform:
    translateY(-7px);

  border-color:
    rgba(255, 48, 70, 0.40);

  background:
    linear-gradient(
      145deg,
      #191d20,
      #0b0d0e
    );

  box-shadow:
    0 28px 66px
    rgba(0, 0, 0, 0.30);
}


/* ==========================================================
   BUTTON RESET
========================================================== */

.pl-paper-button {
  position:
    relative;

  width:
    100%;

  min-height:
    570px;

  padding:
    28px 27px 74px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;

  color:
    inherit;

  text-align:
    left;

  background:
    transparent;

  border:
    0;

  outline:
    0;

  cursor:
    pointer;
}


/* ==========================================================
   GROSSE NUMMER
========================================================== */

.pl-paper-number {
  position:
    absolute;

  top:
    17px;

  right:
    21px;

  color:
    transparent;

  font-size:
    4.7rem;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.08em;

  -webkit-text-stroke:
    1px
    rgba(255, 255, 255, 0.10);

  transition:
    -webkit-text-stroke-color 0.35s ease,
    transform 0.35s ease;
}


.pl-paper-card:hover
.pl-paper-number,

.pl-paper-card:focus-within
.pl-paper-number,

.pl-paper-card.is-active
.pl-paper-number {
  -webkit-text-stroke-color:
    rgba(255, 48, 70, 0.50);

  transform:
    translateY(-2px);
}


/* ==========================================================
   PAPIER VISUAL
========================================================== */

.pl-paper-visual {
  position:
    relative;

  height:
    250px;

  flex:
    0 0 250px;

  display:
    grid;

  place-items:
    center;

  perspective:
    900px;
}


/* Schatten unter dem Papier */

.pl-paper-visual::after {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  bottom:
    24px;

  width:
    166px;

  height:
    24px;

  border-radius:
    50%;

  background:
    rgba(0, 0, 0, 0.42);

  filter:
    blur(13px);

  transform:
    translateX(-50%);

  transition:
    width 0.42s ease,
    opacity 0.42s ease;
}


/* ==========================================================
   PAPIERBLATT
========================================================== */

.pl-paper-sheet {
  position:
    relative;

  z-index:
    2;

  width:
    172px;

  aspect-ratio:
    0.70;

  padding:
    19px;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  color:
    #171717;

  background:
    #ffffff;

  box-shadow:
    0 24px 50px
    rgba(0, 0, 0, 0.36);

  transform:
    rotate(-4deg);

  transition:
    transform 0.48s
    cubic-bezier(
      0.2,
      0.72,
      0.2,
      1
    ),
    box-shadow 0.48s ease;
}


.pl-paper-card:hover
.pl-paper-sheet,

.pl-paper-card:focus-within
.pl-paper-sheet,

.pl-paper-card.is-active
.pl-paper-sheet {
  transform:
    rotate(-1deg)
    translateY(-8px)
    scale(1.025);

  box-shadow:
    0 31px 60px
    rgba(0, 0, 0, 0.44);
}


.pl-paper-card:hover
.pl-paper-visual::after,

.pl-paper-card:focus-within
.pl-paper-visual::after,

.pl-paper-card.is-active
.pl-paper-visual::after {
  width:
    190px;

  opacity:
    0.74;
}


/* ==========================================================
   PAPIER TYPOGRAFIE
========================================================== */

.pl-paper-sheet strong {
  position:
    relative;

  z-index:
    2;

  display:
    block;

  font-size:
    2.65rem;

  font-weight:
    900;

  line-height:
    0.88;

  letter-spacing:
    -0.07em;
}


.pl-paper-sheet small {
  position:
    relative;

  z-index:
    2;

  margin-top:
    9px;

  font-size:
    0.68rem;

  font-weight:
    900;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* ==========================================================
   GLOSS 170
========================================================== */

.pl-paper-card--gloss
.pl-paper-sheet {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #dddddd
    );
}


.pl-paper-sheen {
  position:
    absolute;

  inset:
    -70%;

  z-index:
    1;

  background:
    linear-gradient(
      110deg,
      transparent 35%,
      rgba(255, 255, 255, 0.96) 49%,
      transparent 61%
    );

  transform:
    translateX(-34%);

  transition:
    transform 0.9s ease;
}


.pl-paper-card--gloss:hover
.pl-paper-sheen,

.pl-paper-card--gloss:focus-within
.pl-paper-sheen,

.pl-paper-card--gloss.is-active
.pl-paper-sheen {
  transform:
    translateX(32%);
}


/* ==========================================================
   FOTOPAPIER MATT
========================================================== */

.pl-paper-card--matte
.pl-paper-sheet {
  background:
    linear-gradient(
      145deg,
      #f1f1ee,
      #d7d7d3
    );
}


.pl-paper-card--matte
.pl-paper-sheet::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  opacity:
    0.18;

  pointer-events:
    none;

  background:
    repeating-linear-gradient(
      17deg,
      rgba(0, 0, 0, 0.022) 0,
      rgba(0, 0, 0, 0.022) 1px,
      transparent 1px,
      transparent 5px
    );
}


/* ==========================================================
   NATURPAPIER 80 G

   WEISS
   LEICHTER / DÜNNER ALS DIE ANDEREN
========================================================== */

.pl-paper-card--natural
.pl-paper-sheet {
  background:
    repeating-linear-gradient(
      7deg,
      rgba(0, 0, 0, 0.012) 0,
      rgba(0, 0, 0, 0.012) 1px,
      transparent 1px,
      transparent 5px
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f2f2f0
    );

  border:
    1px solid
    rgba(0, 0, 0, 0.05);

  box-shadow:
    0 14px 26px
    rgba(0, 0, 0, 0.23);

  transform:
    rotate(-4deg)
    scale(0.96);
}


.pl-paper-card--natural:hover
.pl-paper-sheet,

.pl-paper-card--natural:focus-within
.pl-paper-sheet,

.pl-paper-card--natural.is-active
.pl-paper-sheet {
  transform:
    rotate(-1deg)
    translateY(-8px)
    scale(0.985);
}


/* ==========================================================
   HAUPTTEXT
========================================================== */

.pl-paper-copy {
  position:
    relative;

  z-index:
    3;

  margin-top:
    18px;

  display:
    flex;

  flex-direction:
    column;

  transition:
    transform .38s ease;
}


.pl-paper-label {
  margin-bottom:
    8px;

  color:
    var(--pl-red-light);

  font-size:
    0.63rem;

  font-weight:
    900;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.pl-paper-title {
  color:
    #ffffff;

  font-size:
    1.68rem;

  font-weight:
    800;

  line-height:
    1.08;

  letter-spacing:
    -0.035em;
}


.pl-paper-description {
  max-width:
    96%;

  margin-top:
    13px;

  color:
    var(--pl-muted);

  font-size:
    0.83rem;

  line-height:
    1.58;

  opacity:
    1;

  transform:
    translateY(0);

  transition:
    opacity 0.22s ease,
    transform 0.34s ease;
}


/* ==========================================================
   WENN DER INFOBEREICH ÖFFNET

   Beschreibung verschwindet.
   Dadurch gibt es KEINE Überschneidung mehr.
========================================================== */

.pl-paper-card:hover
.pl-paper-description,

.pl-paper-card:focus-within
.pl-paper-description,

.pl-paper-card.is-active
.pl-paper-description {
  opacity:
    0;

  transform:
    translateY(-7px);
}


.pl-paper-card:hover
.pl-paper-copy,

.pl-paper-card:focus-within
.pl-paper-copy,

.pl-paper-card.is-active
.pl-paper-copy {
  transform:
    translateY(-4px);
}


/* ==========================================================
   AUSFAHRENDER INFOBEREICH
========================================================== */

.pl-paper-drawer {
  position:
    absolute;

  z-index:
    10;

  right:
    0;

  bottom:
    0;

  left:
    0;

  height:
    58px;

  padding:
    0 22px;

  overflow:
    hidden;

  display:
    block;

  color:
    #ffffff;

  background:
    rgba(8, 10, 11, 0.985);

  border-top:
    1px solid
    rgba(255, 255, 255, 0.10);

  box-shadow:
    0 -15px 35px
    rgba(0, 0, 0, 0);

  transition:
    height 0.48s
    cubic-bezier(
      0.2,
      0.72,
      0.2,
      1
    ),
    background 0.38s ease,
    box-shadow 0.38s ease;
}


/* ==========================================================
   INFOBEREICH OFFEN
========================================================== */

.pl-paper-card:hover
.pl-paper-drawer,

.pl-paper-card:focus-within
.pl-paper-drawer,

.pl-paper-card.is-active
.pl-paper-drawer {
  height:
    194px;

  background:
    linear-gradient(
      180deg,
      rgba(197, 0, 26, 0.15) 0%,
      rgba(15, 11, 12, 0.985) 30%,
      rgba(8, 10, 11, 0.995) 100%
    );

  box-shadow:
    0 -18px 42px
    rgba(0, 0, 0, 0.30);
}


/* ==========================================================
   DRAWER KOPF
========================================================== */

.pl-paper-drawer-head {
  height:
    57px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    rgba(255, 255, 255, 0.70);

  font-size:
    0.64rem;

  font-weight:
    900;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


/* ==========================================================
   PLUS BUTTON
========================================================== */

.pl-paper-drawer-icon {
  width:
    24px;

  height:
    24px;

  flex:
    0 0 24px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--pl-red-light);

  border:
    1px solid
    rgba(255, 48, 70, 0.28);

  border-radius:
    50%;

  background:
    transparent;

  font-size:
    0.95rem;

  line-height:
    1;

  transition:
    transform 0.38s ease,
    background 0.38s ease,
    box-shadow 0.38s ease;
}


.pl-paper-card:hover
.pl-paper-drawer-icon,

.pl-paper-card:focus-within
.pl-paper-drawer-icon,

.pl-paper-card.is-active
.pl-paper-drawer-icon {
  transform:
    rotate(45deg);

  background:
    rgba(197, 0, 26, 0.14);

  box-shadow:
    0 0 14px
    rgba(255, 48, 70, 0.20);
}


/* ==========================================================
   INFOZEILEN
========================================================== */

.pl-paper-detail {
  position:
    relative;

  min-height:
    43px;

  padding:
    8px 10px 8px 13px;

  display:
    grid;

  grid-template-columns:
    78px
    minmax(0, 1fr);

  gap:
    13px;

  align-items:
    center;

  opacity:
    0;

  transform:
    translateX(-10px);

  border-top:
    1px solid
    rgba(255, 255, 255, 0.065);

  background:
    transparent;
}


/* ==========================================================
   ROTE LINIE LINKS
========================================================== */

.pl-paper-detail::before {
  content:
    "";

  position:
    absolute;

  top:
    7px;

  bottom:
    7px;

  left:
    0;

  width:
    2px;

  opacity:
    0;

  background:
    var(--pl-red-light);

  box-shadow:
    0 0 0
    rgba(255, 48, 70, 0);
}


/* ==========================================================
   DETAIL LABEL
========================================================== */

.pl-paper-detail-label {
  color:
    rgba(255, 255, 255, 0.38);

  font-size:
    0.61rem;

  font-weight:
    900;

  transition:
    color 0.3s ease;
}


/* ==========================================================
   DETAIL TEXT
========================================================== */

.pl-paper-detail strong {
  color:
    rgba(255, 255, 255, 0.83);

  font-size:
    0.69rem;

  font-weight:
    700;

  line-height:
    1.36;
}


/* ==========================================================
   01
   IDEAL FÜR

   LEUCHTET ZUERST AUF
========================================================== */

.pl-paper-card:hover
.pl-paper-detail--ideal,

.pl-paper-card:focus-within
.pl-paper-detail--ideal,

.pl-paper-card.is-active
.pl-paper-detail--ideal {
  animation:
    pl-paper-row-in
    0.48s
    ease
    0.12s
    forwards;
}


.pl-paper-card:hover
.pl-paper-detail--ideal::before,

.pl-paper-card:focus-within
.pl-paper-detail--ideal::before,

.pl-paper-card.is-active
.pl-paper-detail--ideal::before {
  animation:
    pl-paper-red-line
    0.44s
    ease
    0.12s
    forwards;
}


.pl-paper-card:hover
.pl-paper-detail--ideal
.pl-paper-detail-label,

.pl-paper-card:focus-within
.pl-paper-detail--ideal
.pl-paper-detail-label,

.pl-paper-card.is-active
.pl-paper-detail--ideal
.pl-paper-detail-label {
  animation:
    pl-paper-label-red
    0.40s
    ease
    0.12s
    forwards;
}


/* ==========================================================
   02
   VORTEIL

   KOMMT DANACH
========================================================== */

.pl-paper-card:hover
.pl-paper-detail--benefit,

.pl-paper-card:focus-within
.pl-paper-detail--benefit,

.pl-paper-card.is-active
.pl-paper-detail--benefit {
  animation:
    pl-paper-row-in
    0.48s
    ease
    0.48s
    forwards;
}


.pl-paper-card:hover
.pl-paper-detail--benefit::before,

.pl-paper-card:focus-within
.pl-paper-detail--benefit::before,

.pl-paper-card.is-active
.pl-paper-detail--benefit::before {
  animation:
    pl-paper-red-line
    0.44s
    ease
    0.48s
    forwards;
}


.pl-paper-card:hover
.pl-paper-detail--benefit
.pl-paper-detail-label,

.pl-paper-card:focus-within
.pl-paper-detail--benefit
.pl-paper-detail-label,

.pl-paper-card.is-active
.pl-paper-detail--benefit
.pl-paper-detail-label {
  animation:
    pl-paper-label-red
    0.40s
    ease
    0.48s
    forwards;
}


/* ==========================================================
   03
   BEACHTEN

   KOMMT ALS LETZTES
========================================================== */

.pl-paper-card:hover
.pl-paper-detail--note,

.pl-paper-card:focus-within
.pl-paper-detail--note,

.pl-paper-card.is-active
.pl-paper-detail--note {
  animation:
    pl-paper-row-in
    0.48s
    ease
    0.84s
    forwards;
}


.pl-paper-card:hover
.pl-paper-detail--note::before,

.pl-paper-card:focus-within
.pl-paper-detail--note::before,

.pl-paper-card.is-active
.pl-paper-detail--note::before {
  animation:
    pl-paper-red-line
    0.44s
    ease
    0.84s
    forwards;
}


.pl-paper-card:hover
.pl-paper-detail--note
.pl-paper-detail-label,

.pl-paper-card:focus-within
.pl-paper-detail--note
.pl-paper-detail-label,

.pl-paper-card.is-active
.pl-paper-detail--note
.pl-paper-detail-label {
  animation:
    pl-paper-label-red
    0.40s
    ease
    0.84s
    forwards;
}


/* ==========================================================
   ANIMATION
   ZEILE KOMMT REIN + ROTER FLASH
========================================================== */

@keyframes pl-paper-row-in {

  0% {

    opacity:
      0;

    transform:
      translateX(-10px);

    background:
      transparent;

  }


  45% {

    opacity:
      1;

    transform:
      translateX(0);

    background:
      linear-gradient(
        90deg,
        rgba(197, 0, 26, 0.27),
        rgba(197, 0, 26, 0.06) 72%,
        transparent
      );

  }


  100% {

    opacity:
      1;

    transform:
      translateX(0);

    background:
      linear-gradient(
        90deg,
        rgba(197, 0, 26, 0.11),
        transparent 72%
      );

  }

}


/* ==========================================================
   ROTE LINIE LEUCHTET
========================================================== */

@keyframes pl-paper-red-line {

  0% {

    opacity:
      0;

    box-shadow:
      0 0 0
      rgba(255, 48, 70, 0);

  }


  50% {

    opacity:
      1;

    box-shadow:
      0 0 18px
      rgba(255, 48, 70, 1);

  }


  100% {

    opacity:
      1;

    box-shadow:
      0 0 8px
      rgba(255, 48, 70, 0.48);

  }

}


/* ==========================================================
   LABEL ROT
========================================================== */

@keyframes pl-paper-label-red {

  from {

    color:
      rgba(255, 255, 255, 0.38);

  }


  to {

    color:
      var(--pl-red-light);

  }

}

/* ==========================================================
   09
   GROSSFORMATDRUCK
========================================================== */

.pl-production-section {
  background:
    var(--pl-bg-dark);
}


.pl-production-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(340px, 0.84fr);

  gap:
    clamp(
      50px,
      7vw,
      110px
    );

  align-items:
    center;
}



/* ==========================================================
   PRODUKTIONSMEDIUM
========================================================== */

.pl-production-media {
  position:
    relative;

  min-height:
    520px;

  overflow:
    hidden;

  isolation:
    isolate;

  border:
    1px solid
    var(--pl-line);

  border-radius:
    26px;

  background:
    #080a0b;

  box-shadow:
    0 30px 70px
    rgba(0, 0, 0, 0.30);
}


.pl-production-image {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform 0.8s ease;
}


.pl-production-media:hover
.pl-production-image {
  transform:
    scale(1.02);
}


.pl-production-overlay {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.06),
      rgba(0, 0, 0, 0.17) 48%,
      rgba(0, 0, 0, 0.72) 100%
    );
}



/* ==========================================================
   LASER / SCAN ÜBER DEM ECHTEN DRUCKERBILD
========================================================== */

.pl-production-scan {
  position: absolute;

  inset: 0;

  z-index: 6;

  overflow: hidden;

  pointer-events: none;
}


.pl-production-scan span {
  position: absolute;

  top: 3%;

  right: 0;

  left: 0;

  height: 2px;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent 3%,
      rgba(255, 48, 70, 0.20) 15%,
      rgba(255, 48, 70, 0.95) 50%,
      rgba(255, 48, 70, 0.20) 85%,
      transparent 97%
    );

  box-shadow:
    0 0 7px rgba(255, 48, 70, 0.95),
    0 0 18px rgba(255, 48, 70, 0.65),
    0 0 34px rgba(197, 0, 26, 0.40);
}


/* ==========================================================
   LASER START
========================================================== */

.pl-production-section.is-printing
.pl-production-scan span {
  animation:
    pl-production-scan
    5.6s
    cubic-bezier(
      0.35,
      0,
      0.18,
      1
    )
    forwards;
}


/* ==========================================================
   LASER BEWEGUNG
========================================================== */

@keyframes pl-production-scan {

  0% {
    top: 3%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  78% {
    top: 96%;
    opacity: 1;
  }

  88%,
  100% {
    top: 96%;
    opacity: 0;
  }

}

/* ==========================================================
   PRODUKTIONSSTATUS
========================================================== */

.pl-production-status {
  position:
    absolute;

  z-index:
    8;

  top:
    20px;

  left:
    20px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    8px 11px;

  color:
    rgba(255, 255, 255, 0.76);

  background:
    rgba(7, 8, 9, 0.76);

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius:
    999px;

  font-size:
    0.60rem;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.pl-production-status-dot {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--pl-red-light);
}


.pl-production-section.is-printing
.pl-production-status-dot {
  animation:
    pl-production-dot
    1.1s
    ease-in-out
    infinite;
}


@keyframes pl-production-dot {

  0%,
  100% {

    opacity:
      0.42;

    box-shadow:
      0 0 0
      rgba(255, 48, 70, 0);

  }


  50% {

    opacity:
      1;

    box-shadow:
      0 0 15px
      rgba(255, 48, 70, 0.82);

  }

}



/* ==========================================================
   PRODUKTIONSLABELS
========================================================== */

.pl-production-badge {
  position:
    absolute;

  z-index:
    8;

  top:
    20px;

  right:
    20px;

  padding:
    9px 12px;

  color:
    var(--pl-red-light);

  background:
    rgba(7, 8, 9, 0.82);

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius:
    999px;

  font-size:
    0.61rem;

  font-weight:
    900;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


.pl-production-machine {
  position:
    absolute;

  z-index:
    8;

  left:
    20px;

  bottom:
    20px;

  padding:
    10px 13px;

  color:
    #ffffff;

  background:
    rgba(7, 8, 9, 0.86);

  border-left:
    2px solid
    var(--pl-red-light);

  font-size:
    0.62rem;

  font-weight:
    900;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}



/* ==========================================================
   PRODUKTIONSFORTSCHRITT
========================================================== */

.pl-production-progress {
  position:
    absolute;

  z-index:
    8;

  right:
    20px;

  bottom:
    0;

  left:
    20px;

  height:
    2px;

  overflow:
    hidden;

  background:
    rgba(255, 255, 255, 0.08);
}


.pl-production-progress span {
  display:
    block;

  width:
    0;

  height:
    100%;

  background:
    var(--pl-red-light);

  box-shadow:
    0 0 12px
    rgba(255, 48, 70, 0.68);
}


.pl-production-section.is-printing
.pl-production-progress span {
  animation:
    pl-production-progress
    5.6s
    ease
    forwards;
}


@keyframes pl-production-progress {

  0% {

    width:
      0;

  }


  78%,
  100% {

    width:
      100%;

  }

}



/* ==========================================================
   PRODUKTION TEXT
========================================================== */

.pl-production-copy {
  position:
    relative;

  overflow:
    hidden;
}


.pl-production-copy-inner {
  position:
    relative;

  z-index:
    2;
}


.pl-production-copy-inner >
p:not(.pl-kicker) {
  max-width:
    570px;

  margin:
    21px 0 0;

  color:
    var(--pl-muted);

  line-height:
    1.7;
}



/* ==========================================================
   TEXT WIRD MIT DEM LASER AUFGEDECKT
========================================================== */

.pl-production-section.is-printing
.pl-production-copy-inner {
  animation:
    pl-production-copy-reveal
    5.6s
    ease
    forwards;
}


@keyframes pl-production-copy-reveal {

  0%,
  5% {

    opacity:
      0.10;

    clip-path:
      inset(
        0 0 100% 0
      );

  }


  78%,
  100% {

    opacity:
      1;

    clip-path:
      inset(
        0 0 0 0
      );

  }

}



/* ==========================================================
   LASER DURCH DEN TEXT
========================================================== */

.pl-production-copy-laser {
  position:
    absolute;

  z-index:
    10;

  top:
    0;

  right:
    0;

  left:
    0;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--pl-red-light),
      transparent
    );

  box-shadow:
    0 0 15px
    rgba(255, 48, 70, 0.55);
}


.pl-production-section.is-printing
.pl-production-copy-laser {
  animation:
    pl-production-copy-laser
    5.6s
    ease
    forwards;
}


@keyframes pl-production-copy-laser {

  0% {

    top:
      0;

    opacity:
      0;

  }


  5% {

    opacity:
      0.8;

  }


  78% {

    top:
      100%;

    opacity:
      0.8;

  }


  88%,
  100% {

    top:
      100%;

    opacity:
      0;

  }

}



/* ==========================================================
   PRODUKTIONSFAKTEN
========================================================== */

.pl-production-facts {
  margin-top:
    33px;

  border-top:
    1px solid
    var(--pl-line);
}


.pl-production-facts > div {
  padding:
    14px 0;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    25px;

  border-bottom:
    1px solid
    var(--pl-line);
}


.pl-production-facts span {
  color:
    var(--pl-muted-soft);

  font-size:
    0.78rem;
}


.pl-production-facts strong {
  color:
    #ffffff;

  text-align:
    right;

  font-size:
    0.80rem;
}



/* ==========================================================
   10
   DRUCKDATEN
========================================================== */

.pl-printdata-section {
  background:
    var(--pl-bg);
}


.pl-printdata-heading {
  display:
    grid;

  grid-template-columns:
    minmax(320px, 0.9fr)
    minmax(340px, 1.1fr);

  gap:
    clamp(
      40px,
      6vw,
      90px
    );

  align-items:
    end;

  margin-bottom:
    43px;
}


.pl-printdata-heading > p {
  max-width:
    600px;

  margin:
    0;

  color:
    var(--pl-muted);

  line-height:
    1.7;
}



/* ==========================================================
   DRUCKDATEN GRID
========================================================== */

.pl-printdata-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    16px;
}


.pl-printdata-card {
  position:
    relative;

  min-height:
    365px;

  padding:
    27px 25px;

  overflow:
    hidden;

  border:
    1px solid
    var(--pl-line);

  border-radius:
    21px;

  background:
    rgba(255, 255, 255, 0.018);

  transition:
    transform 0.32s ease,
    border-color 0.32s ease,
    background 0.32s ease,
    box-shadow 0.32s ease;
}


.pl-printdata-card::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  opacity:
    0;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(197, 0, 26, 0.15),
      transparent 44%
    );

  transition:
    opacity 0.32s ease;
}


.pl-printdata-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(255, 48, 70, 0.34);

  background:
    rgba(255, 255, 255, 0.024);

  box-shadow:
    0 20px 46px
    rgba(0, 0, 0, 0.20);
}


.pl-printdata-card:hover::before {
  opacity:
    1;
}



/* ==========================================================
   DRUCKDATEN NUMMER
========================================================== */

.pl-printdata-number {
  position:
    absolute;

  top:
    14px;

  right:
    18px;

  color:
    transparent;

  font-size:
    4.2rem;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.08em;

  -webkit-text-stroke:
    1px
    rgba(255, 255, 255, 0.075);
}



/* ==========================================================
   DRUCKDATEN ICON
========================================================== */

.pl-printdata-icon {
  position:
    relative;

  z-index:
    2;

  width:
    48px;

  height:
    48px;

  margin-bottom:
    30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(255, 48, 70, 0.30);

  border-radius:
    13px;

  background:
    rgba(197, 0, 26, 0.07);
}


.pl-printdata-icon svg {
  width:
    27px;

  height:
    27px;

  fill:
    none;

  stroke:
    var(--pl-red-light);

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}



/* ==========================================================
   DRUCKDATEN TEXT
========================================================== */

.pl-printdata-label {
  position:
    relative;

  z-index:
    2;

  margin:
    0;

  color:
    var(--pl-red-light);

  font-size:
    0.61rem;

  font-weight:
    900;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.pl-printdata-card h3 {
  position:
    relative;

  z-index:
    2;

  margin:
    8px 0 0;

  color:
    #ffffff;

  font-size:
    1.32rem;

  line-height:
    1.1;

  letter-spacing:
    -0.025em;
}


.pl-printdata-card >
p:not(.pl-printdata-label) {
  position:
    relative;

  z-index:
    2;

  margin:
    15px 0 0;

  color:
    var(--pl-muted);

  font-size:
    0.83rem;

  line-height:
    1.62;
}



/* ==========================================================
   FORMATBEISPIEL
========================================================== */

.pl-printdata-example {
  position:
    absolute;

  right:
    25px;

  bottom:
    24px;

  left:
    25px;

  z-index:
    2;

  padding-top:
    14px;

  display:
    flex;

  align-items:
    baseline;

  gap:
    11px;

  border-top:
    1px solid
    var(--pl-line);
}


.pl-printdata-example span {
  color:
    var(--pl-muted-soft);

  font-size:
    0.65rem;
}


.pl-printdata-example strong {
  color:
    #ffffff;

  font-size:
    0.82rem;
}


.pl-printdata-example small {
  margin-left:
    auto;

  color:
    var(--pl-red-light);

  font-size:
    0.68rem;

  font-weight:
    800;
}



/* ==========================================================
   QUALITÄT
========================================================== */

.pl-quality-scale {
  position:
    absolute;

  right:
    25px;

  bottom:
    47px;

  left:
    25px;

  z-index:
    2;

  height:
    7px;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:
    5px;
}


.pl-quality-scale span {
  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.10);
}


.pl-quality-scale span:nth-child(1) {
  background:
    rgba(197, 0, 26, 0.32);
}


.pl-quality-scale span:nth-child(2) {
  background:
    rgba(197, 0, 26, 0.50);
}


.pl-quality-scale span:nth-child(3) {
  background:
    rgba(255, 48, 70, 0.72);
}


.pl-quality-scale span:nth-child(4) {
  background:
    var(--pl-red-light);
}


.pl-quality-caption {
  position:
    absolute;

  right:
    25px;

  bottom:
    22px;

  left:
    25px;

  z-index:
    2;

  color:
    var(--pl-muted-soft);

  font-size:
    0.65rem;
}



/* ==========================================================
   DATEI TAGS
========================================================== */

.pl-file-tags {
  position:
    absolute;

  right:
    25px;

  bottom:
    23px;

  left:
    25px;

  z-index:
    2;

  padding-top:
    14px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  border-top:
    1px solid
    var(--pl-line);
}


.pl-file-tags span {
  padding:
    6px 9px;

  color:
    rgba(255, 255, 255, 0.72);

  background:
    rgba(255, 255, 255, 0.035);

  border:
    1px solid
    rgba(255, 255, 255, 0.11);

  border-radius:
    999px;

  font-size:
    0.62rem;

  font-weight:
    800;
}



/* ==========================================================
   DRUCKDATEN TIPP
========================================================== */

.pl-printdata-note {
  margin-top:
    16px;

  padding:
    17px 20px;

  display:
    grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    20px;

  align-items:
    center;

  border:
    1px solid
    rgba(255, 48, 70, 0.18);

  border-radius:
    16px;

  background:
    rgba(197, 0, 26, 0.055);
}


.pl-printdata-note-label {
  color:
    var(--pl-red-light);

  font-size:
    0.63rem;

  font-weight:
    900;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.pl-printdata-note p {
  margin:
    0;

  color:
    rgba(255, 255, 255, 0.70);

  font-size:
    0.79rem;

  line-height:
    1.55;
}



/* ==========================================================

   11
   WIRKUNG AUS DER ENTFERNUNG

========================================================== */

.pl-impact-section {

  background:

    var(--pl-bg-dark);

}



.pl-impact-layout {

  display:

    grid;

  grid-template-columns:

    minmax(360px, 0.88fr)

    minmax(450px, 1.12fr);

  gap:

    clamp(

      50px,

      7vw,

      110px

    );

  align-items:

    center;

}





/* ==========================================================

   WIRKUNG STAGE

========================================================== */

.pl-impact-stage {

  position:

    relative;

  min-height:

    555px;

  padding:

    42px;

  overflow:

    hidden;

  display:

    grid;

  place-items:

    center;

  border:

    1px solid

    var(--pl-line);

  border-radius:

    26px;

  background:

    linear-gradient(

      rgba(255, 255, 255, 0.021) 1px,

      transparent 1px

    ),

    linear-gradient(

      90deg,

      rgba(255, 255, 255, 0.021) 1px,

      transparent 1px

    ),

    #0d1012;

  background-size:

    40px 40px;

}



.pl-impact-stage::before {

  content:

    "";

  position:

    absolute;

  width:

    390px;

  height:

    390px;

  border-radius:

    50%;

  background:

    radial-gradient(

      circle,

      rgba(197, 0, 26, 0.13),

      transparent 68%

    );

}



.pl-impact-stage-label {

  position:

    absolute;

  z-index:

    5;

  top:

    19px;

  left:

    20px;

  color:

    var(--pl-muted-soft);

  font-size:

    0.61rem;

  font-weight:

    900;

  letter-spacing:

    0.13em;

  text-transform:

    uppercase;

}





/* ==========================================================

   WIRKUNG PLAKAT

   Die neuen Bilder sind Querformat.
   Deshalb kein schmaler Hochformat-Rahmen mehr.

========================================================== */

.pl-impact-poster {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      800px,
      100%
    );

  aspect-ratio:
    3 / 2;

  overflow:
    hidden;

  background:
    #090a0b;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  box-shadow:
    0 32px 65px
    rgba(0, 0, 0, 0.48);

  transform:
    rotate(-1.2deg);

  transition:
    transform .45s ease,
    box-shadow .45s ease;
}



.pl-impact-stage:hover

.pl-impact-poster {

  transform:

    rotate(0deg)

    translateY(-6px);

  box-shadow:

    0 38px 78px

    rgba(0, 0, 0, 0.56);

}





/* ==========================================================

   WIRKUNG BILDER

   contain =
   komplettes Bild bleibt sichtbar

========================================================== */

.pl-impact-image {

  position:

    absolute;

  inset:

    0;

  width:

    100%;

  height:

    100%;

  display:

    block;

  object-fit:

    contain;

  object-position:

    center;

  opacity:

    0;

  transform:

    scale(1.018);

  transition:

    opacity 0.58s ease,

    transform 0.85s

    cubic-bezier(

      0.2,

      0.72,

      0.2,

      1

    );

}



.pl-impact-image.is-active {

  opacity:

    1;

  transform:

    scale(1);

}





/* ==========================================================

   BILD OVERLAY

========================================================== */

.pl-impact-poster-overlay {

  position:

    absolute;

  z-index:

    3;

  inset:

    0;

  pointer-events:

    none;

  background:

    linear-gradient(

      180deg,

      transparent 72%,

      rgba(0, 0, 0, 0.24)

    );

}





/* ==========================================================

   BETRACHTUNGSABSTAND

========================================================== */

.pl-impact-distance {

  position:

    absolute;

  right:

    27px;

  bottom:

    21px;

  left:

    27px;

  display:

    grid;

  grid-template-columns:

    1fr

    auto

    1fr;

  gap:

    11px;

  align-items:

    center;

}



.pl-impact-distance span {

  height:

    1px;

  background:

    rgba(255, 255, 255, 0.14);

}



.pl-impact-distance strong {

  color:

    rgba(255, 255, 255, 0.39);

  font-size:

    0.60rem;

  font-weight:

    850;

  letter-spacing:

    0.12em;

  text-transform:

    uppercase;

}





/* ==========================================================

   WIRKUNG LISTE

========================================================== */

.pl-impact-list {

  display:

    grid;

  border-top:

    1px solid

    var(--pl-line);

}



.pl-impact-item {

  position:

    relative;

  width:

    100%;

  min-height:

    150px;

  padding:

    22px 0;

  overflow:

    hidden;

  display:

    grid;

  grid-template-columns:

    104px

    minmax(0, 1fr);

  gap:

    20px;

  align-items:

    center;

  color:

    inherit;

  text-align:

    left;

  background:

    transparent;

  border:

    0;

  border-bottom:

    1px solid

    var(--pl-line);

  cursor:

    pointer;

  transition:

    padding-left 0.32s ease,

    background 0.32s ease;

}



.pl-impact-item:hover,

.pl-impact-item:focus-visible,

.pl-impact-item.is-active {

  padding-left:

    13px;

  background:

    linear-gradient(

      90deg,

      rgba(197, 0, 26, 0.10),

      transparent 72%

    );

  outline:

    0;

}





/* ==========================================================

   WIRKUNG NUMMER

========================================================== */

.pl-impact-number {

  color:

    transparent;

  font-size:

    clamp(

      3.7rem,

      5vw,

      5.3rem

    );

  font-weight:

    900;

  line-height:

    0.8;

  letter-spacing:

    -0.07em;

  -webkit-text-stroke:

    1px

    rgba(255, 255, 255, 0.34);

  transition:

    -webkit-text-stroke-color 0.35s ease,

    transform 0.35s ease;

}



.pl-impact-item:hover

.pl-impact-number,

.pl-impact-item:focus-visible

.pl-impact-number,

.pl-impact-item.is-active

.pl-impact-number {

  -webkit-text-stroke-color:

    var(--pl-red-light);

  transform:

    translateX(3px);

}





/* ==========================================================

   WIRKUNG TEXT

========================================================== */

.pl-impact-copy {

  display:

    block;

}



.pl-impact-copy small {

  display:

    block;

  color:

    var(--pl-red-light);

  font-size:

    0.60rem;

  font-weight:

    900;

  letter-spacing:

    0.13em;

  text-transform:

    uppercase;

}



.pl-impact-copy strong {

  display:

    block;

  margin-top:

    6px;

  color:

    #ffffff;

  font-size:

    clamp(

      1.3rem,

      1.8vw,

      1.7rem

    );

  line-height:

    1.1;

}



.pl-impact-copy > span:last-child {

  display:

    block;

  max-width:

    580px;

  margin-top:

    10px;

  color:

    var(--pl-muted);

  font-size:

    0.83rem;

  line-height:

    1.58;

}





/* ==========================================================

   WIRKUNG ZEITBALKEN

========================================================== */

.pl-impact-progress {

  position:

    absolute;

  right:

    0;

  bottom:

    0;

  left:

    0;

  height:

    2px;

  overflow:

    hidden;

}



.pl-impact-progress > span {

  display:

    block;

  width:

    0;

  height:

    100%;

  background:

    var(--pl-red-light);

  box-shadow:

    0 0 10px

    rgba(255, 48, 70, 0.45);

}



.pl-impact-item.is-active

.pl-impact-progress > span {

  animation:

    pl-impact-timer

    4.6s

    linear

    forwards;

}



@keyframes pl-impact-timer {

  from {

    width:

      0;

  }



  to {

    width:

      100%;

  }

}
/* ==========================================================
   12
   FAQ
========================================================== */

.pl-faq-section {
  background:
    var(--pl-bg);
}


.pl-faq-layout {
  display:
    grid;

  grid-template-columns:
    minmax(280px, 0.72fr)
    minmax(460px, 1.28fr);

  gap:
    clamp(
      50px,
      7vw,
      105px
    );

  align-items:
    start;
}


.pl-faq-heading {
  position:
    sticky;

  top:
    120px;
}


.pl-faq-list {
  border-top:
    1px solid
    var(--pl-line);
}


.pl-faq-item {
  border-bottom:
    1px solid
    var(--pl-line);
}


.pl-faq-item summary {
  min-height:
    82px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  color:
    #ffffff;

  cursor:
    pointer;

  list-style:
    none;

  font-size:
    1.02rem;

  font-weight:
    750;
}


.pl-faq-item summary::-webkit-details-marker {
  display:
    none;
}


.pl-faq-item summary b {
  width:
    30px;

  height:
    30px;

  flex:
    0 0 30px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--pl-red-light);

  border:
    1px solid
    rgba(255, 48, 70, 0.28);

  border-radius:
    50%;

  font-size:
    1.1rem;

  font-weight:
    500;

  transition:
    transform 0.28s ease,
    background 0.28s ease;
}


.pl-faq-item[open]
summary b {
  transform:
    rotate(45deg);

  background:
    rgba(197, 0, 26, 0.10);
}


.pl-faq-item > p {
  max-width:
    700px;

  margin:
    0;

  padding:
    0 54px 24px 0;

  color:
    var(--pl-muted);

  font-size:
    0.86rem;

  line-height:
    1.65;
}



/* ==========================================================
   13
   ANFRAGE
   GLEICH WIE DIE ANDEREN PRODUKTSEITEN
========================================================== */

.pl-final-section {

  padding-top:
    72px;

  padding-bottom:
    105px;

  background:
    var(--pl-bg);

}


/* ==========================================================
   KARTE
========================================================== */

.pl-final-card {

  position:
    relative;

  min-height:
    0;

  padding:
    clamp(
      42px,
      5vw,
      68px
    );

  overflow:
    hidden;

  display:
    block;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:
    28px;

  background:

    radial-gradient(
      circle at 5% 20%,
      rgba(197,0,26,.13),
      transparent 38%
    ),

    rgba(255,255,255,.025);

  box-shadow:
    0 30px 70px
    rgba(0,0,0,.22);

}


/* Keine zusätzliche Kreis-Deko */

.pl-final-card::before,
.pl-final-card::after {

  display:
    none !important;

  content:
    none !important;

}


/* ==========================================================
   TEXT
========================================================== */

.pl-final-copy {

  position:
    relative;

  z-index:
    2;

  max-width:
    850px;

}


.pl-final-copy >
p:not(.pl-kicker) {

  max-width:
    720px;

  margin:
    22px 0 0;

  color:
    var(--pl-muted);

  line-height:
    1.7;

}


/* ==========================================================
   BUTTON
========================================================== */

.pl-final-button {

  min-height:
    56px;

  margin-top:
    30px;

  padding:
    16px 29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  color:
    #ffffff !important;

  background:
    #f10d1b;

  border:
    1px solid
    #f10d1b;

  border-radius:
    999px;

  box-shadow:
    0 15px 35px
    rgba(241,13,27,.24);

  font-size:
    .94rem;

  font-weight:
    850;

  text-decoration:
    none;

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;

}


.pl-final-button span {

  font-size:
    1rem;

  transition:
    transform .25s ease;

}


.pl-final-button:hover,
.pl-final-button:focus-visible {

  color:
    #ffffff !important;

  background:
    #c5001a;

  transform:
    translateY(-3px);

  box-shadow:
    0 20px 42px
    rgba(241,13,27,.32);

  outline:
    none;

}


.pl-final-button:hover span,
.pl-final-button:focus-visible span {

  transform:
    translateX(4px);

}


/* ==========================================================
   ANFRAGE BUTTON
========================================================== */

.pl-final-button {
  width:
    fit-content;

  min-height:
    56px;

  margin-top:
    29px;

  padding:
    15px 25px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    15px;

  color:
    #ffffff !important;

  background:
    var(--pl-red);

  border:
    1px solid
    var(--pl-red);

  border-radius:
    999px;

  box-shadow:
    0 14px 32px
    rgba(197, 0, 26, 0.24);

  font-size:
    0.88rem;

  font-weight:
    850;

  text-decoration:
    none;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.pl-final-button span {
  font-size:
    1.10rem;

  transition:
    transform 0.25s ease;
}


.pl-final-button:hover,
.pl-final-button:focus-visible {
  color:
    #ffffff !important;

  background:
    var(--pl-red-light);

  border-color:
    var(--pl-red-light);

  box-shadow:
    0 18px 39px
    rgba(197, 0, 26, 0.34);

  transform:
    translateY(-3px);

  outline:
    0;
}


.pl-final-button:hover span,
.pl-final-button:focus-visible span {
  transform:
    translateX(4px);
}



/* ==========================================================
   14
   FOOTER
========================================================== */

body#plakate .footer a {
  color:
    inherit;

  text-decoration:
    none;

  transition:
    color 0.25s ease;
}


body#plakate .footer a:hover,
body#plakate .footer a:focus-visible,
body#plakate .footer-links a:hover,
body#plakate .footer-links a:focus-visible {
  color:
    var(--pl-red-light) !important;

  outline:
    none;
}



/* ==========================================================
   15
   BACK TO TOP
========================================================== */

.pl-back-to-top {
  position:
    fixed;

  z-index:
    900;

  right:
    24px;

  bottom:
    24px;

  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  color:
    #ffffff;

  background:
    var(--pl-red);

  border-radius:
    50%;

  text-decoration:
    none;

  box-shadow:
    0 14px 32px
    rgba(197, 0, 26, 0.28);
}



/* ==========================================================
   16
   RESPONSIVE – 1180 PX
========================================================== */

@media (max-width: 1180px) {

  .pl-page {
    padding-top:
      86px;
  }


  .pl-production-layout {
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(310px, 0.95fr);

    gap:
      48px;
  }


  .pl-impact-layout {
    grid-template-columns:
      minmax(330px, 0.88fr)
      minmax(390px, 1.12fr);

    gap:
      45px;
  }

}



/* ==========================================================
   RESPONSIVE – 980 PX
========================================================== */

@media (max-width: 980px) {

  .pl-page {
    padding-top:
      82px;
  }


  /* HERO */

  .pl-hero,
  .pl-hero-inner {
    min-height:
      680px;
  }


  .pl-hero-bg {
    width:
      76%;

    right:
      -8%;
  }


  .pl-hero-content {
    width:
      min(
        600px,
        64%
      );
  }


  /* PLAKATE IM EINSATZ */

  .pl-usage-grid {
    gap:
      15px;
  }


  /* FORMATE */

  .pl-format-layout {
    grid-template-columns:
      1fr;

    gap:
      42px;
  }


  .pl-format-stage {
    min-height:
      460px;
  }


  /* PAPIER */

  .pl-paper-grid {
    grid-template-columns:
      1fr;

    gap:
      20px;
  }


  .pl-paper-card,
  .pl-paper-button {
    min-height:
      390px;
  }


  .pl-paper-button {
    padding:
      25px 220px 76px 25px;

    justify-content:
      center;
  }


  .pl-paper-visual {
    position:
      absolute;

    top:
      50%;

    right:
      25px;

    width:
      170px;

    height:
      240px;

    transform:
      translateY(-50%);
  }


  .pl-paper-sheet {
    width:
      145px;
  }


  .pl-paper-copy {
    max-width:
      470px;
  }


  /* PRODUKTION */

  .pl-production-layout {
    grid-template-columns:
      1fr;

    gap:
      42px;
  }


  .pl-production-copy {
    max-width:
      720px;
  }


  /* DRUCKDATEN */

  .pl-printdata-heading {
    grid-template-columns:
      1fr;

    gap:
      20px;
  }


  /* WIRKUNG */

  .pl-impact-layout {
    grid-template-columns:
      1fr;

    gap:
      42px;
  }


  .pl-impact-stage {
    min-height:
      500px;
  }


  /* FAQ */

  .pl-faq-layout {
    grid-template-columns:
      1fr;

    gap:
      38px;
  }


  .pl-faq-heading {
    position:
      static;
  }

}



/* ==========================================================
   RESPONSIVE – 760 PX
========================================================== */

@media (max-width: 760px) {

  .pl-page {
    padding-top:
      76px;
  }


  .pl-breadcrumb {
    display:
      none;
  }


  .pl-section {
    padding:
      70px 0;
  }


  .pl-section-heading {
    margin-bottom:
      34px;
  }


  .pl-section-heading h2,
  .pl-printdata-heading h2,
  .pl-faq-heading h2,
  .pl-final-copy h2,
  .pl-production-copy h2 {
    font-size:
      clamp(
        2.15rem,
        10vw,
        3.6rem
      );

    line-height:
      1.03;
  }


  /* HERO */

  .pl-hero,
  .pl-hero-inner {
    min-height:
      820px;
  }


  .pl-hero-inner {
    padding-top:
      39px;

    padding-bottom:
      22px;
  }


  .pl-hero-bg {
    top:
      auto;

    right:
      -24%;

    bottom:
      0;

    width:
      135%;

    height:
      59%;

    opacity:
      0.48;

    object-position:
      63% center;
  }


  .pl-hero-overlay {
    background:
      linear-gradient(
        180deg,
        #080909 0%,
        rgba(8, 9, 9, 0.98) 38%,
        rgba(8, 9, 9, 0.77) 57%,
        rgba(8, 9, 9, 0.40) 76%,
        #080909 100%
      );
  }


  .pl-hero-services {
    margin-bottom:
      32px;

    gap:
      16px 20px;
  }


  .pl-hero-service {
    font-size:
      0.61rem;
  }


  .pl-hero-content {
    width:
      100%;
  }


  .pl-hero h1 {
    font-size:
      clamp(
        2.9rem,
        13vw,
        4.5rem
      );
  }


  .pl-hero-text {
    max-width:
      95%;

    font-size:
      0.90rem;
  }


  /* HERO FAKTEN */

  .pl-hero-facts {
    grid-template-columns:
      1fr;

    margin-top:
      39px;

    padding:
      10px 14px 0;
  }


  .pl-hero-fact,
  .pl-hero-fact:first-child {
    min-height:
      0;

    padding:
      14px 2px;
  }


  .pl-hero-fact:not(:last-child)::after {
    top:
      auto;

    right:
      0;

    bottom:
      0;

    left:
      0;

    width:
      auto;

    height:
      1px;
  }


  /* PLAKATE IM EINSATZ */

  .pl-usage-grid {
    grid-template-columns:
      1fr;

    gap:
      23px;
  }


  .pl-usage-card {
    max-width:
      620px;

    margin:
      0 auto;
  }


  .pl-usage-image {
    height:
      auto;

    aspect-ratio:
      5 / 3.4;
  }


  /* PAPIER */

  .pl-paper-card,
  .pl-paper-button {
    min-height:
      540px;
  }


  .pl-paper-button {
    padding:
      25px 21px 76px;

    justify-content:
      flex-start;
  }


  .pl-paper-visual {
    position:
      relative;

    top:
      auto;

    right:
      auto;

    width:
      auto;

    height:
      245px;

    transform:
      none;
  }


  .pl-paper-copy {
    max-width:
      none;
  }


  /* PRODUKTION */

  .pl-production-media {
    min-height:
      440px;
  }


  .pl-production-sheet {
    width:
      min(
        220px,
        43%
      );

    right:
      6%;
  }


  /* DRUCKDATEN */

  .pl-printdata-grid {
    grid-template-columns:
      1fr;

    gap:
      17px;
  }


  .pl-printdata-card {
    min-height:
      340px;
  }


  /* WIRKUNG */

  .pl-impact-stage {
    min-height:
      470px;

    padding:
      32px 20px;
  }


  .pl-impact-poster {
    width:
      min(
        245px,
        72%
      );
  }


  .pl-impact-item {
    grid-template-columns:
      76px
      minmax(0, 1fr);

    gap:
      16px;
  }


  .pl-impact-number {
    font-size:
      3.4rem;
  }


  /* ANFRAGE */

  .pl-final-section {
    padding-top:
      54px;

    padding-bottom:
      75px;
  }


  .pl-final-card {
    min-height:
      360px;

    padding:
      35px 25px;
  }

}



/* ==========================================================
   RESPONSIVE – 520 PX
========================================================== */

@media (max-width: 520px) {

  .pl-hero,
  .pl-hero-inner {
    min-height:
      850px;
  }


  /* FORMATE */

  .pl-format-buttons {
    display:
      grid;

    grid-template-columns:
      repeat(
        5,
        1fr
      );

    gap:
      6px;
  }


  .pl-format-buttons button {
    min-width:
      0;

    padding:
      10px 5px;
  }


  .pl-format-stage {
    min-height:
      380px;
  }


  /* PAPIER */

  .pl-paper-title {
    font-size:
      1.48rem;
  }


  .pl-paper-card,
  .pl-paper-button {
    min-height:
      555px;
  }


  .pl-paper-drawer {
    padding:
      0 17px;
  }


  .pl-paper-card:hover
  .pl-paper-drawer,
  .pl-paper-card:focus-within
  .pl-paper-drawer,
  .pl-paper-card.is-active
  .pl-paper-drawer {
    height:
      218px;
  }


  .pl-paper-detail {
    grid-template-columns:
      68px
      minmax(0, 1fr);
  }


  /* PRODUKTION */

  .pl-production-media {
    min-height:
      360px;
  }


  .pl-production-sheet {
    width:
      155px;

    right:
      7%;
  }


  .pl-production-art {
    padding:
      19px 14px;
  }


  .pl-production-art strong,
  .pl-production-art b {
    font-size:
      1.45rem;
  }


  .pl-production-badge {
    top:
      12px;

    right:
      12px;

    font-size:
      0.52rem;
  }


  .pl-production-status {
    top:
      12px;

    left:
      12px;

    font-size:
      0.52rem;
  }


  .pl-production-machine {
    left:
      12px;

    bottom:
      15px;

    font-size:
      0.54rem;
  }


  /* DRUCKDATEN */

  .pl-printdata-note {
    grid-template-columns:
      1fr;

    gap:
      7px;
  }


  /* WIRKUNG */

  .pl-impact-stage {
    min-height:
      410px;
  }


  .pl-impact-poster {
    width:
      min(
        210px,
        70%
      );
  }


  .pl-impact-item {
    min-height:
      135px;

    grid-template-columns:
      62px
      minmax(0, 1fr);

    gap:
      13px;
  }


  .pl-impact-number {
    font-size:
      3rem;
  }


  .pl-impact-copy strong {
    font-size:
      1.18rem;
  }


  .pl-impact-copy >
  span:last-child {
    font-size:
      0.76rem;
  }


  .pl-impact-distance strong {
    font-size:
      0.50rem;
  }


  /* FAQ */

  .pl-faq-item summary {
    min-height:
      75px;

    font-size:
      0.98rem;
  }


  .pl-faq-item > p {
    padding-right:
      0;
  }


  /* ANFRAGE */

  .pl-final-button {
    width:
      100%;
  }

}



/* ==========================================================
   RESPONSIVE – 430 PX
========================================================== */

@media (max-width: 430px) {

  .pl-hero,
  .pl-hero-inner {
    min-height:
      880px;
  }


  .pl-hero-services {
    gap:
      14px 15px;
  }


  .pl-production-media {
    min-height:
      320px;
  }


  .pl-impact-stage {
    min-height:
      390px;
  }

}



/* ==========================================================
   17
   REDUZIERTE BEWEGUNG
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .pl-changing-word,
  .pl-hero-service,
  .pl-hero-bg,
  .pl-hero-fact,
  .pl-usage-card,
  .pl-usage-image img,
  .pl-poster-preview,
  .pl-paper-card,
  .pl-paper-sheet,
  .pl-paper-sheen,
  .pl-paper-drawer,
  .pl-paper-detail,
  .pl-production-image,
  .pl-production-art,
  .pl-production-laser,
  .pl-production-status-dot,
  .pl-production-progress span,
  .pl-production-copy-inner,
  .pl-production-copy-laser,
  .pl-printdata-card,
  .pl-impact-poster,
  .pl-impact-image,
  .pl-impact-item,
  .pl-impact-number,
  .pl-impact-progress span,
  .pl-final-button {

    transition:
      none !important;

    animation:
      none !important;

  }


  .pl-production-art,
  .pl-production-copy-inner {

    opacity:
      1 !important;

    clip-path:
      none !important;

  }


  .pl-production-laser,
  .pl-production-copy-laser,
  .pl-impact-progress {

    display:
      none !important;

  }

}